<template>
    <view>
        <view class="flexs align-center head_box">
            <view class="head_title text-center" @tap="gethead" :data-type="item.type" v-for="(item, index) in headlist" :key="index">
                <view :class="index1 == item.type ? 'text-lg text-bold' : 'text-df text-darkGrey'">{{ item.name }}</view>

                <view :class="'line_box radius ' + (index1 == item.type ? 'bg-orange' : '')" style="margin: 6rpx auto 0 auto"></view>
            </view>
        </view>
        <!-- <view style="height: 90rpx;"></view> -->
        <view class="pages">
            <van-empty v-if="list.length == 0" description="暂无数据" />
            <!-- 用户信息 -->
            <view class="listbox" v-for="(items, index) in list" :key="index">
                <view class="flexbox-sb align-center padding-tb-sm border_bottom">
                    <view class="flexs align-center">
                        <image :src="items.path" class="nickpath"></image>
                        <view class="margin-lr-xs text-df hidden">{{ items.nickname }}</view>
                        <view class="text-dm text-gray">{{ items.mobile }}</view>
                    </view>
                    <view class="text-sm" style="color: #ff1717">{{ index1 == 2 ? '待自提' : '已自提' }}</view>
                </view>

                <view class="listbox1 padding-tb-xs">
                    <view class="text-darkGray text-sm">订单号：{{ items.orderSn }}</view>
                </view>

                <view
                    :class="'listbox1 ' + (items.mallOrderItemDtos.length > 2 && index == 1 ? '' : 'border_bottom')"
                    v-if="index < 2"
                    @tap="goorderdetailed"
                    :data-item="items"
                    v-for="(inner, index1) in items.mallOrderItemDtos"
                    :key="index1"
                >
                    <image class="listbox2left" :src="inner.productPic"></image>

                    <view class="margin-left-sm" style="width: 490rpx">
                        <view class="text-black text-sm text-tline">{{ inner.productName }}</view>
                        <view class="text-darkGray text-sm flexs justify-between margin-top-xs">
                            <view>{{ inner.spType }}</view>
                            <view>x{{ inner.productQuantity }}</view>
                        </view>
                        <view
                            :class="'red17 flexs text-df text-red align-center ' + (inner.priceMaker != '0.00' && inner.priceMaker ? 'markerpic' : 'markerpic_no')"
                            style="padding-top: 4rpx"
                        >
                            <block v-if="inner.priceMaker != '0.00' && inner.priceMaker">
                                <text class="text-orange">创客</text>
                                <text style="color: #ff1717">￥{{ inner.priceMaker }}</text>
                                <text v-if="items.useIntegration">+</text>
                            </block>
                            <block v-else>
                                <block v-if="inner.productPrice">
                                    ￥{{ inner.productPrice == '0.00' ? '' : inner.productPrice }}
                                    <block v-if="items.useIntegration">+</block>
                                </block>
                            </block>
                            <view v-if="items.useIntegration">
                                <image src="/static/images/douzi.png" style="width: 20rpx; height: 18rpx; margin: 0 10rpx"></image>
                                <text>{{ items.useIntegration || '0' }}</text>
                            </view>
                        </view>
                    </view>
                </view>

                <view class="text-center text-df border_bottom padding-bottom-sm" @tap="goorderdetailed" :data-item="items" v-if="items.productNum > 2">查看更多</view>

                <view class="listbox2">
                    <view class="text-right">
                        <text class="text-black text-df">共{{ items.productNum }}件商品，总价：</text>
                        <text class="text-df" style="color: #ff1717">¥{{ items.totalAmount }}</text>
                    </view>
                    <view class="flexs" style="justify-content: flex-end">
                        <view class="remindbtn1 text-dm" v-if="index1 == 2" :data-status="items.status" data-type="1" :data-item="items" @tap.stop.prevent="getcode">扫核销码</view>
                        <!-- <view class="remindbtn1 text-dm " wx:if="{{items.status==0}}" catchtap="goorderdetailed" data-item="{{items}}">
            去付款
          </view> -->
                    </view>
                </view>
            </view>
            <!-- 结束 -->
        </view>
        <view style="height: 40rpx"></view>
    </view>
</template>

<script>
const _request = require('../../../utils/request.js');

const moment = require('../../../utils/moment.min');

const app = getApp();
export default {
    data() {
        return {
            list: [],

            //订单列表
            headlist: [
                {
                    name: '到店自提',
                    type: 2
                },
                {
                    name: '已自提',
                    type: 1
                }
            ],

            index1: -1,
            pageNo: 0,
            total: 0,
            reload: false,
            orderSn: '',

            //用户端userId
            userId2: '',

            inner: {
                productPic: '',
                productName: '',
                spType: '',
                productQuantity: '',
                priceMaker: '',
                productPrice: ''
            }
        };
    }, //status订单状态：0->待付款；1->待发货；2->已发货；3->已完成；4->已关闭；5->无效订单; 6已退款  9退款失败，8退款中
    onLoad: function (options) {
        if (options.type) {
            this.setData({
                index1: options.type
            });
        }
    },
    onShow: function () {
        if (this.reload) {
            this.setData({
                pageNo: 0,
                list: []
            });
        }

        this.getlist();
    },
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {
        // wx.redirectTo({
        //   url: '/pagesb/index/index',
        // })
        // clearInterval(timerse)
    },
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {
        this.setData(
            {
                pageNo: 0
            },
            () => {
                // 获取订单列表接口
                this.getlist();
            }
        );
        uni.stopPullDownRefresh(); //停止下拉刷新
    },
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {
        // if(this.data.list?.length < this.data.total){
        this.setData(
            {
                pageNo: this.pageNo + 1
            },
            () => {
                // 获取订单列表接口
                this.getlist();
            }
        ); // }
    },
    methods: {
        // 获取订单列表接口
        getlist() {
            console.log(this.index1);

            _request
                .get(
                    '/mall-order/getStoreRelatedList',
                    {
                        // status: "",
                        isPickUp: Number(this.index1),
                        //是否已自提 1-是 2-否
                        pageSize: 20,
                        offset: this.pageNo,
                        // userId: wx.getStorageSync('userid'),
                        // type: '',
                        storeId: uni.getStorageSync('storeId')
                    },
                    app.globalData.mallType
                )
                .then((res) => {
                    if (res.data.code === 200) {
                        var _list = res.data.data;

                        _list.map((items) => {
                            // let _num = 0
                            items.mallOrderItemDtos.forEach((inner) => {
                                // _num = Number(inner.productQuantity) + _num
                                console.log(JSON.parse(inner.specification));
                                inner.spObj = JSON.parse(inner.specification);
                                let list = [];
                                inner.spObj.forEach((item) => {
                                    list.push(item.key + '：' + item.value);
                                });
                                inner.spType = list.join(',');
                            }); //   let lastTime = new moment(items.remindTime || '').format('x')
                            //   let time = new moment().format('x')
                            //   // console.log('diff', lastTime, time, (time-lastTime)/3600/1000)
                            //   let overTime = (time-lastTime)/3600/1000 > 24
                            //   items.showRemind = items.remindType == 1 || (items.remindType == 2 && overTime)
                            //   items.total = _num
                        }); //数据去重

                        let mlist = this.pageNo > 0 ? [...this.list, ..._list] : _list;

                        let deWeight = () => {
                            let map = new Map();

                            for (let item of mlist) {
                                map.set(item.id, item);
                            }

                            return [...map.values()];
                        };

                        mlist = deWeight();
                        this.setData({
                            list: mlist,
                            total: res.data.data?.total || 0
                        });
                    } else {
                        uni.showToast({
                            title: res.data.message,
                            icon: 'none'
                        });
                    }
                });
        },

        // 切换头部
        gethead(e) {
            this.setData(
                {
                    pageNo: 0,
                    list: [],
                    index1: e.currentTarget.dataset.type
                },
                () => {
                    this.getlist();
                }
            );
        },

        // 操作
        getcode(e) {
            let vm = this;
            uni.scanCode({
                //扫描API
                success: function (res) {
                    // console.log(res);
                    let parms = res.result.split('&');
                    const orderSn = parms[0]?.split('=')[1] || '';
                    const userId = parms[1]?.split('=')[1] || '';

                    if (orderSn) {
                        vm.setData(
                            {
                                orderSn: orderSn,
                                userId2: userId
                            },
                            () => {
                                vm.getOrder(e);
                            }
                        );
                    } else {
                        uni.showToast({
                            title: '识别失败，请扫描正确的核销码',
                            icon: 'none',
                            duration: 1500
                        });
                    }
                },
                fail: function (res) {
                    uni.showToast({
                        title: '识别失败，请扫描正确的核销码',
                        icon: 'none',
                        duration: 1500
                    });
                }
            });
        },

        getOrder(e) {
            const { item } = e.currentTarget.dataset;
            uni.navigateTo({
                url: '../orderinfo?cancel=' + 'true' + '&orderSn=' + this.orderSn + '&userId=' + this.userId2 + '&bool=' + true
            });
        },

        goorderdetailed(e) {
            const { item } = e.currentTarget.dataset;
            uni.navigateTo({
                url: '/pages/mallorder/orderinfo?orderid=' + item?.id + '&orderSn=' + item?.orderSn + '&bool=' + true
            });
        }
    }
};
</script>
<style>
.head_box {
    /* position: fixed;
  left: 0; */
    display: flex;
    justify-content: space-around;
    width: 750rpx;
    background-color: #fbfbfb;
    z-index: 99;
    height: 100rpx;
}

.head_title {
    width: 20%;
}

.line_box {
    width: 60rpx;
    height: 8rpx;
}

.pages {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    background-color: #fbfbfb;
}

.listbox {
    padding: 0 20rpx 20rpx 20rpx;
    width: 670rpx;
    background: #fff;
    box-shadow: 2rpx 2rpx 8rpx 0rpx rgba(236, 236, 236, 0.4);
    border-radius: 8rpx;
    justify-content: center;
    margin-top: 20rpx;
}

.listbox1 {
    margin: 20rpx auto 0 auto;
    width: 670rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 20rpx;
}

.border_bottom {
    border-bottom: 1rpx solid #dadada;
}

.listbox2left {
    width: 150rpx;
    height: 150rpx;
}

.red17 {
    color: #ff1717;
}

.douzis {
    width: 24rpx;
    height: 24rpx;
}

.listbox2 {
    width: 670rpx;
    margin-top: 20rpx;
}

.remindbtn1 {
    background: #ff8722;
    color: #fff;
    /* width: 152rpx; */
    height: 52rpx;
    line-height: 52rpx;
    text-align: center;
    margin-top: 10rpx;
    border-radius: 26rpx;
    margin-left: 20rpx;
    padding: 0 24rpx;
}

.remindbtn2 {
    /* width: 152rpx; */
    height: 52rpx;
    line-height: 52rpx;
    text-align: center;
    margin-top: 10rpx;
    border-radius: 26rpx;
    border: 1rpx solid #ff8722;
    color: #ff8722;
    padding: 0 24rpx;
}

.nickpath {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
}

.hidden {
    max-width: 340rpx;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}

.markerpic {
    height: 34rpx;
    background: #fff6ef;
    border: 1rpx solid #ff8722;
    border-radius: 4rpx;
    justify-content: center;
    display: flex;
    align-items: center;
    font-size: 22rpx;
    padding: 0 10rpx;
    width: fit-content;
    margin-top: 20rpx;
}

.markerpic_no {
    font-size: 26rpx;
    color: #ff1717;
    margin-top: 20rpx;
    font-weight: bold;
    display: flex;
}
</style>
